<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="../css/mitsubishiMain.css">
</head>
<body>
	<main id="mainPage">
		<header class="main-header">
			<span>广汽三菱互联数据看板</span>
		</header>
		<section class="main-container">
			<div class="main-col main-col-1">
				<div class="main-col-header">
					<span>舆情分析</span>
				</div>
				<div class="main-body">
					<div class="main-chart" id="generalPublicSentiment">
						<div class="circle-chart-content">
							<div class="circle-chart-box">
								<svg id="personalBadChart" viewBox="0 0 100 100" style="width: 118px; height: 118px;">
									<path class="circle-chart-track" fill="none"></path>
									<path class="circle-chart-path" fill="none" stroke-linecap="round"></path>
								</svg>
								<p></p>
							</div>
							<span>个人舆情负面率</span>
						</div>
						<div class="circle-chart-content">
							<div class="circle-chart-box">
								<svg id="mediaBadChart" viewBox="0 0 100 100" style="width: 118px; height: 118px;">
									<path class="circle-chart-track" fill="none"></path>
									<path class="circle-chart-path" fill="none" stroke-linecap="round"></path>
								</svg>
								<p></p>
							</div>
							<span>媒体舆情负面率</span>
						</div>
					</div>
					<div class="main-chart" id="personalPublicSentiment">
						<h3>个人舆情数</h3>
						<div id="personalPublicSentimentChart">
							<ul class="legend-list">
								<li class="legend-item"><i class="bg-blue"></i>非负面数</li>
								<li class="legend-item"><i class="bg-red"></i>负面数</li>
							</ul>
							<div class="bar-list"></div>
						</div>
					</div>
					<div class="main-chart no-border-bottom" id="mediaPublicSentiment">
						<h3>媒体舆情数</h3>
						<div id="mediaPublicSentimentChart">
							<ul class="legend-list">
								<li class="legend-item"><i class="bg-blue"></i>非负面数</li>
								<li class="legend-item"><i class="bg-red"></i>负面数</li>
							</ul>
							<div class="stack-list"></div>
						</div>
					</div>
				</div>
				<b class="corner corner-top-left"></b>
				<b class="corner corner-top-right"></b>
				<b class="corner corner-bottom-right"></b>
				<b class="corner corner-bottom-left"></b>
			</div>
			<div class="main-col main-col-2">
				<div id="infoList" class="info-list">
					<div class="info-item">
						<div class="info-value">29008</div>
						<div class="info-label">
							<div class="info-pic pic-user"></div>本月个人舆情数
						</div>
					</div>
					<div class="info-item">
						<div class="info-value">4172</div>
						<div class="info-label">
							<div class="info-pic pic-sound"></div>本月媒体舆情数
						</div>
					</div>
					<div class="info-item">
						<div class="info-value">3277</div>
						<div class="info-label">
							<div class="info-pic pic-car"></div>认证车主总数
						</div>
					</div>
				</div>
				<div id="mapContainer">
					<h2>认证车主分布</h2>
					<div id="chinaChart" style="width: 100%; height: 720px;"></div>
					<!--<div id="provinceChart" style="width: 100%; height: 100px;"></div>-->
				</div>
			</div>
			<div class="main-col main-col-1">
				<div class="main-col-header">
					<span>口碑分析</span>
				</div>
				<div class="main-body">
					<div class="main-chart" id="generalKoubei">
						<div class="analysis-item">
							<p class="analysis-value"><span class="analysis-bold">4.55</span></p>
							<div class="analysis-pic pic-flower"></div>
							<p class="analysis-label">品牌口碑得分</p>
						</div>
						<div class="analysis-item">
							<p class="analysis-value"><span class="analysis-bold" id="curRank">21</span><span class="analysis-split">/</span><span id="totalRank">64</span></p>
							<div class="analysis-pic pic-cup"></div>
							<p class="analysis-label">品牌口碑评分排名</p>
						</div>
					</div>
					<div class="main-chart" id="koubeiMark">
						<h3>口碑评分</h3>
						<div class="mark-list">
							<div>
								
							</div>
							<div class="mark-item">
								<div class="mark">
									<div class="ring">
										<div class="pointer"></div>
									</div>
									<!--
									<svg class="ring-svg" viewBox="0 0 100 100" style="width: 136px; height: 136px;">
										<path class="circle-chart-path" fill="none" stroke="#2ad078" stroke-width="14.7" d="M 50 50 m 0 -42 a 42 42 0 1 1 0 84 a 42 42 0 1 1 0 -84" style="stroke-dasharray: 267.978px, 267.978px; stroke-dashoffset: 66.9945px; transform: rotate(-135deg); transform-origin: 50% 50%;"></path>
										<path class="circle-chart-path" fill="none" stroke="#00d6ff" stroke-width="14.7" d="M 50 50 m 0 -42 a 42 42 0 1 1 0 84 a 42 42 0 1 1 0 -84" style="stroke-dasharray: 267.978px, 267.978px; stroke-dashoffset: 133.989px; transform: rotate(-135deg); transform-origin: 50% 50%;"></path>
										<path class="circle-chart-path" fill="none" stroke="#ea1159" stroke-width="14.7" d="M 50 50 m 0 -42 a 42 42 0 1 1 0 84 a 42 42 0 1 1 0 -84" style="stroke-dasharray: 267.978px, 267.978px; stroke-dashoffset: 200.983px; transform: rotate(-135deg); transform-origin: 50% 50%;"></path>
									</svg>
									-->
									<div class="mark-entity">
										<p class="mark-score">4.60</p>
										<p class="mark-title">口碑评分</p>
									</div>
								</div>
								<div class="mark-label">欧蓝德</div>
							</div>
							<div class="mark-item">
								<div class="mark">
									<div class="ring">
										<!-- 计算公式：-45 + 270 * (score / 5) -->
										<div class="pointer" style="transform: rotate(197.1deg);"></div>
									</div>
									<div class="mark-entity">
										<p class="mark-score">3.65</p>
										<p class="mark-title">口碑评分</p>
									</div>
								</div>
								<div class="mark-label">劲炫ASX</div>
							</div>
							<div class="mark-item">
								<div class="mark">
									<div class="ring">
										<div class="pointer"></div>
									</div>
									<div class="mark-entity">
										<p class="mark-score">4.80</p>
										<p class="mark-title">口碑评分</p>
									</div>
								</div>
								<div class="mark-label">派杰罗</div>
							</div>
						</div>
					</div>
				</div>
				<div class="main-chart no-border-bottom" id="koubeiScore">
					<h3>口碑得分</h3>
					<div class="radar-list">
						<div class="radar-item">
							<div class="radar" id="radar01"></div>
							<p class="radar-label"></p>
						</div>
						<div class="radar-item">
							<div class="radar" id="radar02"></div>
							<p class="radar-label"></p>
						</div>
						<div class="radar-item">
							<div class="radar" id="radar03"></div>
							<p class="radar-label"></p>
						</div>
					</div>
				</div>
				<b class="corner corner-top-left"></b>
				<b class="corner corner-top-right"></b>
				<b class="corner corner-bottom-right"></b>
				<b class="corner corner-bottom-left"></b>
			</div>
		</section>
	</main>
</body>
<script type="text/javascript" src="../lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../lib/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="../lib/echarts/map/js/china.js"></script>
<script type="text/javascript" src="../script/mitsubishi.js"></script>
</html>